<template>
    <div class="text-data-info">
        <div class="text-data-header">
          <h1 class="text-data-title" >文本数据信息</h1>
          <Icon type="ios-close" class="text-data-close" @click="$emit('close')"/>
        </div>
        
        <div class="text-data-meta">
            <div>阅读:{{data?.reads}}</div>
            <div>推送:{{data?.pushes}}</div>
            <div>点赞:{{data?.thumbs}}</div>
            <div>收藏:{{data?.collects}}</div>
            <div>回复:{{data?.reply_count}}</div>
        </div>
    </div>
  </template>
  
  <script setup>
  // 用于渲染文本的一些数据,这个主要是可以进行大量的拓展
  const props = defineProps({
    id: {
        type: Number,
    },
    data: {
        type: Object,
        default: () => { return {} }
    }
  })
  
  
  </script>
  
  <style  scoped>
  .text-data-info{
    width: 40%;
    height: 100%;
    background-color: #e4ebf3;
    animation: slideInFromRight 0.5s ease-out forwards;
    position: absolute;
    transform: translateX(100%);
    right: 0;
  }
  @keyframes slideInFromRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
  }
  .text-data-header{
    display: flex;
    justify-self: center;
  }
  .text-data-title{
    font-size: 12px;
    text-align: center;
    padding: 1px;
  }
  .text-data-close{
    font-size: 32px;
    text-align: center;
    position: absolute;
    padding: 1px;
    right: 10px;
    cursor: pointer;
  }
  .text-data-close:hover{
    color: #ff6b6b;
    border-radius: 50%;
    border: 1px solid #ff6b6b;
    scale: 0.75;
  }
  .text-data-meta{
    width: 100%;
    height: calc(100% - 55px);
    border-radius: 5px;
    padding: 2px;
    box-sizing: border-box;
    /* background-color: red; */
    display: flex;
    gap:2px;
    justify-self: center;
    
  }
  .text-data-meta>div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20%;
    height: 100%;
    flex-grow: 1;
    user-select: none;
  }
  
  </style>